class Snake{
  head:HTMLElement;
  bodies:HTMLCollection;
  element:HTMLElement;
  constructor(){
    this.element=document.getElementById('snake')!;
    this.head=document.querySelector('#snake > div')as HTMLElement;
    this.bodies=this.element.getElementsByTagName('div');

  }
  get x(){
    return this.head.offsetLeft
  }
  get y(){
    return this.head.offsetTop
  }
  set x(value:number){
    if (this.x===value) {
      return
    }
    if (value<0||value>290) {
      throw new Error("蛇撞墙了");
      
    }
    if (this.bodies[1]&&(this.bodies[1]as HTMLElement).offsetLeft===value) {
      // console.log(111);
      if (value>this.x) {
        value=this.x-10
      }else{
        value=this.x+10
      }
      
    }
    this.moveBody()

    this.head.style.left=value+'px'
    this.checkHeadBody()

  }
  set y(value:number){
    if (this.y===value) {
      return
    }
    if (value<0||value>290) {
      throw new Error("蛇撞墙了");
      
    }
    if (this.bodies[1]&&(this.bodies[1]as HTMLElement).offsetTop===value) {
      // console.log(111);
      if (value>this.y) {
        value=this.y-10
      }else{
        value=this.y+10
      }
      
    }
    this.moveBody()
    this.head.style.top=value+'px'
    this.checkHeadBody()
  }
  addBobe(){
    this.element.insertAdjacentHTML('beforeend','<div></div>')
  }
  moveBody(){
    
    for(let i = this.bodies.length-1;i>0;i--){
      let x=(this.bodies[i-1]as HTMLElement).offsetLeft;
      let y=(this.bodies[i-1]as HTMLElement).offsetTop;
    //  console.log(x,y);
     
      (this.bodies[i]as HTMLElement).style.left=x+'px';
      (this.bodies[i]as HTMLElement).style.top= y+'px';
      // console.log(this.bodies[i]);
      
    }
  }
  checkHeadBody(){
    for (let i=1;i<this.bodies.length;i++) {
      let bd=this.bodies[i]as HTMLElement
      if (this.x===bd.offsetLeft&&this.y===bd.offsetTop) {
        throw new Error("撞到自己了");
      }
    }
  }
}
export default Snake